import {Layout} from '../../src/Layout';
export default Layout;

import {Link, Text} from '@react-spectrum/s2';
import docs from 'docs:@react-spectrum/s2';

export const tags = ['anchor', 'hyperlink', 'href'];
export const description = 'Allows a user to navigate to another page.';

# Link

<PageDescription>{docs.exports.Link.description}</PageDescription>

<VisualExample
  component={Link}
  docs={docs.exports.Link}
  props={['children', 'variant', 'staticColor', 'isStandalone', 'isQuiet']}
  initialProps={{children: 'The missing link', href: 'https://www.imdb.com/title/tt6348138/', target: '_blank'}}
  importSource="@react-spectrum/s2"
  type="s2" />

## Events

Links with an `href` will be handled by the browser, or via a [client side router](routing). Links without an `href` will be rendered as a `<span role="link">` instead of an `<a>`. Use the `onPress` event to handle user interaction.

```tsx render
"use client";
import {Link} from '@react-spectrum/s2';

<Link onPress={() => alert('Pressed link')}>Link</Link>
```

## API

<PropTable component={docs.exports.Link} links={docs.links} />
